{extend name="main" /}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                <a><cite>模块管理</cite></a><span lay-separator="">/</span>
                <a><cite>{$data['table_name']} <span class="corange">{$data['table_comment']}</span> </cite></a>
            </div>
        </div>

       <div class="layui-card-body">

                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">模块信息</li>
                        <li>字段信息</li>
                    </ul>
                    <div class="layui-tab-content">
        <!--                模块信息-->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form edit_info" action="">
                                <input type="hidden" name="id" value="{$data.id}">
                                {include file="new_module/edit_info"}
                            </form>
                        </div>
        <!--                字段信息-->
                        <div class="layui-tab-item ">
                            {include file="new_module/edit_field_list"}
                        </div>
                    </div>
                </div>

       </div>

        <div class="layui-card-body">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">
                    确认保存
                </button>
            </div>
        </div>
    </div>

</div>
{/block}

{block name="js"}
<script src="/static/admin/js/layuiTableApi.js"></script>
<script>
    var table = layui.table,form = layui.form,laytpl = layui.laytpl,layedit = layui.layedit;
    var layer_index,tableData;
    var cols = [
        {field:'field', title:'字段名',templet: '#showTips'}
        // ,{field:'type', title:'字段类型'}
        ,{field:'column_comment', title:'字段备注'}
        ,{field:'name', title: '字段别名 <i class="layui-icon layui-icon-edit "></i>',edit:'text' }
        ,{field:'field_default', title:'默认值 <i class="layui-icon layui-icon-edit"></i>',event:'field_default'}
        ,{field:'field_type', title:'类型', templet: '#selectTpl'}//,width:200
        ,{field:'is_edit', title:'是否编辑',  templet: '#switchTpl'} //, width: 80
        ,{field:'show_list', title:'是否显示',  templet: '#switchTpl2'} //,width: 80
        ,{field:'is_time', title:'时间字段',  templet: '#switchTpl3'},


    ];
    //表格初始化
    table.render({
        elem: '#test',
        url:'getInfo.html?id={$id}',
        //默认最小宽度
        cellMinWidth: 80,
        //头部工具栏
        defaultToolbar:[],
        autoSort:false, //关闭前端默认排序
        cols: [cols],
        //数据回调解析
        parseData:function(res){
            var tableData = res.data;
            return {
                code: res.code==1?0:1, //解析接口状态
                msg: res.msg, //解析提示文本
                count: 0, //解析数据长度
                data: tableData //解析数据列表
            }
        },
        //当前数据 当前页码 当前数据条数
        done:function(res, curr, count){
            //记录表格数据
            tableData= res.data
        }
    });

    //监听开关操作
    form.on('switch(switchTpl)', function(obj){
        var value = obj.elem.checked?1:0
        tableUpData(this.value,this.name,value)
    });

    //监听下拉框
    form.on('select(selectTpl)', function(obj){
        var id = obj.elem.id
        var value = obj.value
        var name = obj.elem.name
        tableUpData(id,name,value)
    });

    //监听单元格编辑
    table.on('edit(test)', function(obj){
        var value = obj.value, //得到修改后的值
            data = obj.data, //得到所在行所有键值
            field = obj.field; //得到字段
        tableUpData(data.id,field,value)
    });

    //监听行事件
    var tableObj;
    table.on('tool(test)', function (obj) {
        var event = obj.event;
        var data =obj.data;
        if (event === "field_default"){
            var html = $('#moCode').html();
            var list = data.field_default;
            if(list){
                list = JSON.parse(list)
            }else{
                list = [];
            }
            var param = {
                id:data.id,
                list:list,
            }
            laytpl(moCode.innerHTML).render(param,function(html){
                // 处理你的业务逻辑
                layer.open({
                    type: 1,
                    title:'编辑默认参 ',
                    skin: 'layui-layer-black', //加上边框
                    area: ['500px', '400px'], //宽高
                    content: html
                })
                tableObj = obj;
            })

        }
    })

    //监听数据提交事件
    form.on('submit(save)', (obj)=>{
        var formData = $(".edit_info").serializeArray();
        var reData = {};
        var formText = {
            'name':'模块名',
            'file_name':'文件名',
        }
        for(var i in formData){
            if(formData[i].value==''){
                layer.msg(formText[formData[i].name]+" 必填选项不能为空");
                return false;
            }
            reData[`${formData[i].name}`] = formData[i].value
        }
        reData['tableData'] = tableData
        saveData(reData,0);
        return false;
    });

    function saveData(reData,isDel){
        reData['isdel'] = isDel || 0;
        _post('edit',reData,(res)=>{
            if(res.code==1){
                if(res.data == 'isdel'){
                    //询问是否要删除模块 然后 提交
                    layer.confirm(res.msg, {
                        title:'重要提醒',
                        icon:3,
                        btn: ['删除旧模块','取消'] //按钮
                    }, function(){
                        //删除旧文件
                        _post('delete',{id:reData['id']},()=>{
                            saveData(reData,1);
                        })
                    }, function(){});
                }else{
                    layer.msg(res.msg,{icon:1,time:1000},()=>{
                        //直接父级关闭所有
                        parent.layer.closeAll();
                        parent.table.reload('test',{})
                    })
                }
            }
        })
    }

    //新增一行
    form.on('submit(newadd)',(obj)=>{
        var html = `<div class="item">
                <input type="text" name="key"  placeholder="" autocomplete="off" class="layui-input myinput" value="">
                <input type="text" name="value"  placeholder="" autocomplete="off" class="layui-input myinput" value="">
                <button type="submit" lay-filter="newadd" lay-submit class="layui-btn layui-btn-xs myinput">新增一行</button>
                <button type="submit" lay-filter="deladd" lay-submit class="layui-btn layui-btn-xs myinput layui-btn-danger">删除</button>
            </div>`
        $(obj.elem).parents('.item').after(html)
        // $(obj.elem).parent().insertBefore()
        return false;
    })
    //删除一行
    form.on('submit(deladd)',(obj)=>{
        console.log(obj)
        console.log($(obj.elem).parent().remove());
        return false;
    })

    //保存字段默认值
    form.on('submit(savefield)',(obj)=>{
        console.log(obj)
        var key=[],value=[],data={};
        $('input[name="key"]').each(function(k,v){
            key.push($(v).val())
        })
        $('input[name="value"]').each(function(k,v){
            value.push($(v).val())
        })
        for (var i in key){
            if(key[i]!='' && value[i]!=''){
                data[key[i]] = value[i]
            }
        }
        if(data && data!='{}'){
            data = JSON.stringify(data);
        }else{
            data = ""
        }
        tableUpData(obj.field.id,'field_default',data)
        layer.closeAll();
        return false;
    })


    //修改table的值
    function tableUpData(id,name,value){
        console.log(id,name,value)
        tableData.forEach(function(v){
            if(v.id== id){
                v[name] = value;
                if(tableObj){
                    tableObj.update({
                        [`${name}`]:value
                    })
                    tableObj = false;
                }
                return;
            }
        })
    }
</script>
{/block}
